<script setup>
import img from '@/assets/img/ikun.png'
import associationApply from "@/api/apply/associationApply.js";
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps(['data','currentUser'])
const inputForm={
				id: "",
				companyId:"",
				officeId: "",
				roleId: "",
				postId: "",
				loginName: "", // 登录名
				name:"",
				remarks: "", // 备注
				currentLoginName:"",
			}
const open = () => {
  ElMessageBox.confirm(
    '确定加入该组织吗?',
    '提醒',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
        console.log(props.currentUser)
        inputForm.id=props.currentUser.id
        inputForm.companyId=props.currentUser.companyDTO.id
        inputForm.officeId=props.currentUser.officeDTO.id
        inputForm.postId=props.data.id
        inputForm.loginName=props.currentUser.loginName
        inputForm.name=props.currentUser.name
        inputForm.currentLoginName=props.currentUser.loginName
        associationApply.apply(inputForm)
        .then(()=>{
            ElMessage({
            type: 'success',
            message: '申请成功',
            })
        })
    })
    .catch(() => {
      
    })
}
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>
<template>
    <div class="card">
        <div class="card-img">
            <el-image :src="img" :fit="cover" class="img" @click="dialogVisible=true" />
        </div>
        <div style="margin: 15px;">
            <div style="height: 75%;overflow: hidden;">
                <div>
                    <p class="remarks">
                        {{ data.remarks }}
                    </p>
                </div>
            </div>
            <div style="display: flex;gap: 15px;align-items: center;height: 25%;overflow: hidden;">
                <div>
                    <p>组织名称：{{ data.name }}</p>
                </div>
                <div>
                    <p>组织人数：{{ data.total }}</p>
                </div>
                <div>
                    <p class="apply" @click="open">申请加入该组织</p>
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="dialogVisible" title="" width="500" draggable>
    <span>展示组织详细信息</span>
    <template #footer>
        <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="Approved by">
                <el-input v-model="formInline.user" placeholder="Approved by" clearable />
            </el-form-item>
            <el-form-item label="Activity zone">
            <el-select
                v-model="formInline.region"
                placeholder="Activity zone"
                clearable
            >
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
            </el-form-item>
            <el-form-item label="Activity time">
            <el-date-picker
                v-model="formInline.date"
                type="date"
                placeholder="Pick a date"
                clearable
            />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="onSubmit">Query</el-button>
            </el-form-item>
        </el-form> -->
        <div class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.card{
    --length:15px;
    --card-hight:150px;
    margin: var(--length) ;
    height: 100px;
    background-color: white;
    box-shadow: 0 0 8px 0 rgb(0, 0, 0,0.2);
    /* height: calc((100% - 6*var(--length)) / 3); */
    height: var(--card-hight);
    display: flex;
    flex-grow: 1;
    flex-basis: 300px;
    transition: 0.3s;
}
.card:hover{
    transform: scale(1.01);
}
.remarks{
    font-size: 18px;
}
.apply{
    font-size: 15px;
    color: rgb(236, 197, 0);
    cursor: pointer;
}
.card-img{
    display: flex;
    align-items: center;
}
.img{
    height: var(--card-hight);
    width: var(--card-hight);
}
.img:hover{
    cursor: pointer;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>